<template>
<!--  问题：我们不知道什么时候能拿到max 值，但是总归有一刻会拿到真正的max 值-->
<!-- 我们可以使用watch属性监听来监听 父组件传递过来的max值，不管watch 会被触发几次，但是，最后一次肯定是一个合法的max值
 --> <div class="mui-numbox" data-numbox-min='1'>
					<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
					<input id="test" class="mui-input-numbox" type="number" value="1" 
                    @change="countChanged" ref="numbox"/><!-- 实现购物车数量+1第七步： -->
					<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
				</div>
   <!-- 实现购物车数量+1第六步：分析：子组件什么时候把数据传递给父组件？ -->
  <!--  分析：当点击+／-号和中间数字的时候，都要把已经改变了的数值传递给“加入购物车”，
   所以，我们可以用change事件，当监听到中间数字改变，不管你点了+／-，都把改变的数值传出去 -->
</template>
<script>

import mui from '../../lib/mui/js/mui.min的副本.js';
export default {
    mounted(){
        //初始化数字选择框组件
        //mui(Selector).numbox();
        mui(".mui-numbox").numbox();
    },
    methods:{
        countChanged(){
            //每当文本框的数据被修改的时候，立即把最新的数据通过事件调用，传递给父组件
            //console.log(this.$refs.numbox.value)//在后台查看数据确实可行
            this.$emit("getcount",parseInt(this.$refs.numbox.value));//实现购物车数量+1第八步
        }
    },
    props:["max"],  //实现购物车数量+1第10步-2：库存有多少件，就能+到多少件，而不是具体数字
    watch:{//实现购物车数量+1第11步：
        //属性监听
        'max':function(newVal,oldVal){//使用js api设置numbox的最大值
              mui(".mui-numbox")
              .numbox()
              .setOption("max",newVal); 
        }

    }
};
</script>
<style lang="scss" scoped>

</style>
